<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>登录页面-后台管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="后台管理系统">
<meta name="description" content="后台管理系统">
<meta name="author" content="itfxq">
<link href="css/bootstrap.min.css"  rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
<link href="css/materialdesignicons.min.css" rel="stylesheet" th:href="@{/static/css/materialdesignicons.min.css}">
<link href="css/style.min.css" rel="stylesheet" th:href="@{/static/css/style.min.css}">
  <!--对话框-->
  <link rel="stylesheet" th:href="@{/static/js/jconfirm/jquery-confirm.min.css}">

<style>
  body{
    background-image: url('/static/images/bg1.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
.coder-wrapper {
    position: relative;
}
.coder-login {
    display: flex !important;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;

}
.login-center {
    background: #fff;
    min-width: 48.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 5px;
    margin: 2.85714em 0;
}
.login-header {
    color: white;
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;

}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
  .login-center{
    filter:alpha(opacity=60);
    opacity:0.8;
    background-color: rgba(33, 56, 65, 0.82);
  }
</style>
</head>

<body>
<div class="row coder-wrapper">
  <div class="coder-login">
    <div class="login-center">
      <div class="login-header text-center">
        <div style="color:white;font-size:26px;"> 订餐管理系统 </div>
      </div>
      <form th:action="@{/login}" method="post">
        <div class="form-group has-feedback feedback-left">
          <input style="color:black" type="text" placeholder="请输入账号" class="form-control" name="username" id="username" />
          <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left">
          <input style="color:black" type="password" placeholder="请输入密码" class="form-control" id="password" name="password" />
          <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
        </div>


        <div class="form-group row">
          <div class="col-xs-6">
            <button class="btn btn-block btn-primary" type="button" th:onclick="goLogin()">立即登录</button>
          </div>
          <div class="col-xs-6">
            <button class="btn btn-block btn-primary" type="button" th:onclick="reset()">重置</button>
          </div>
        </div>
          <div id="errorInfo" style="display: none"></div>
      </form>
      <hr>
      <footer class="col-sm-12 text-center">
        <p class="m-b-0"><a>登录系统表示您同意隐私协议</a></p>
      </footer>
    </div>
  </div>
</div>
<script type="text/javascript"  th:src="@{/static/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/bootstrap.min.js}"></script>
<!--对话框-->
<script type="text/javascript"  th:src="@{/static/js/jconfirm/jquery-confirm.min.js}"></script>
<script type="text/javascript" th:inline="javascript">


  function reset(){
     $("#username").val('');
     $("#password").val('');
  }


  function goLogin(){
      //注册
      var username = $("#username").val();
      var password = $("#password").val();
      //验证通过
      $.ajax({
          url: "/login",
          type: "POST",
          data: {"username":username,"password":password},
          success: function (data) {
            console.log(data);
              if (data.isSuccess) {
                  window.location.href="/index"
              } else{
                  $("#errorInfo").css('display',"block");
                  $("#errorInfo").html("<span style='color:red'>"+data.message+"</span>");
              }
          }
      });
  }

</script>
</body>
</html>
